<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>일정 수정</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">
<style type="text/css">
	#detail_form{
		width:750px;
		text-align: left;
		padding-top:20px;
		background-color: #FFFFFF;
	}
	body, table, input, textarea, select, button, label{
		font-family: "Nanum Gothic", sans-serif;
		font-size: 14px;
		padding-top:15px;
	}
	body{
		background-color:#CEE4F8;
	}
	.text-label {
	    color: #cdcdcd;
	    font-style: italic;
    }
    .ui-autocomplete-loading {
		background: white url('/resources/img/ui-anim_basic_16x16.gif') right center no-repeat;
  	}
  	.ui-autocomplete-category {
	    font-weight: bold;
	    padding: .2em .4em;
	    margin: .8em 0 .2em;
	    line-height: 1.5;
	}
}
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/resources/lib/jquery.ui.datepicker-ko.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<script>

$(function() {

	// 시작시간 끝시간 가져와서 형식 바꾸기
	var startDay = '${calendarDto.startTime}'.substring(0,10);
	var endDay = '${calendarDto.endTime}'.substring(0,10);
	var startTime = '${calendarDto.startTime}'.substring(10,19);
	var endTime = '${calendarDto.endTime}'.substring(10,19);
	
	// 시작날짜, 끝날짜 값 지정해주기
	$("#startDay").val(startDay);
	$("#endDay").val(endDay);
	
	// 종일 체크에 따라 시간 표시
	var allDay = '${calendarDto.allDay}';
	
	if(allDay == "true"){
		$("input:checkbox[id='allDay']").attr("checked", "checked");
		$("select[id='startTime']").hide();
		$("select[id='endTime']").hide();
	}else{
		$("select[id='startTime']").show();
		$("select[id='endTime']").show();
	}
	
	// 종일체크 클릭이벤트 처리
	$("#allDay").click(function(){
		if($("#allDay").is(":checked")){
			$("select[id='startTime']").hide(200);
			$("select[id='endTime']").hide(200);
		}else{
			$("select[id='startTime']").show(200);
			$("select[id='endTime']").show(200);
		}
	});
	
	
	// 시작날짜
	$("#startDay").datepicker({
		onClose: function( selectedDate ) {
			$( "#endDay" ).datepicker( "option", "minDate", selectedDate );
		}
	});
	
	// 끝날짜
	$("#endDay").datepicker({
		onClose: function( selectedDate ) {
			$( "#startDay" ).datepicker( "option", "maxDate", selectedDate );
		}
	});
	
	// 시간 선택박스 만들기..
	var type = "#startTime";
	for(var k=0;k<2;k++){
		$(type).append("<option value='00:00'>오전 12:00</option>");
		$(type).append("<option value='00:30'>오전 12:30</option>");
		for(var i=1;i<12;i++){
			if(i < 10) i='0'+i;
			$(type).append("<option value='"+i+":00'>오전 "+i+":00</option>");
			$(type).append("<option value='"+i+":30'>오전 "+i+":30</option>");
		}
		$(type).append("<option value='12:00'>오후 12:00</option>");
		$(type).append("<option value='12:30'>오후 12:30</option>");
		var j = 13;
		for(var i=1;i<12;i++){
			if(i < 10) i='0'+i;
			$(type).append("<option value='"+j+":00'>오후 "+i+":00</option>");
			$(type).append("<option value='"+j+":30'>오후 "+i+":30</option>");
			j=j+1;
		}
		type ="#endTime";
	}
	// DB에 불러온 시간을 선택해주기..
	for(var i=0;i<48;i++){
		if($("#startTime option:eq("+i+")").text().trim() == startTime.trim()){
			$("#startTime option:eq("+i+")").attr("selected", "true");
			break;
		};
	}
	for(var i=0;i<48;i++){
		if($("#endTime option:eq("+i+")").text().trim() == endTime.trim()){
			$("#endTime option:eq("+i+")").attr("selected", "true");
			break;
		};
	}
	
	$("#startTime").change(function(){
		alert($("#startTime option:selected").val());
	});
	
	// 폼 클릭 이벤트
	$('input[type="text"]').each(function(){
		//alert($(this).attr('title'));
		if($(this).attr('title')){
	    	this.value = $(this).attr('title');
		    $(this).addClass('text-label');
		 
		    $(this).focus(function(){
		        if(this.value == $(this).attr('title')) {
		            this.value = '';
		            $(this).removeClass('text-label');
		        }
		    });
		}
	 
	    $(this).blur(function(){
	        if(this.value == '' && $(this).attr('title')) {
	        	this.value = $(this).attr('title');
		        $(this).addClass('text-label');
	        }
	    });
	});
	//폼클릭 이벤트처리 끝
});

function check(){
	alert($("#allDay").val());
}

// 맵선택하는 새창 열기
function loadMap(json){
	window.open("/calendar/map.do","","width=800, height=500, history=no, resizable=no, status=no, toolbar=no, menubar=no,");
}
// 맵에서 주소 받아오기
function getPlace(json, latitude, longitude){
	$("#addMapState").html("<span class='fa fa-check' style='color:green;'> 지도추가됨</span>");
	if($("#place").val() == ""){
		$("#place").val(json);
	}
	$("#latlng").val(latitude+"/"+longitude);
}
</script>
<script type="text/javascript">
  WebFontConfig = {
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

</head>
<body>
<center>
<div id="detail_form" class="well well-lg">

	<form action="/calendar/updateSchedule.do" method="post" class="form-inline">
	
	<input type="hidden" value="${calendarDto.id}" id="id" name="id">
	
	<label for="title" style="padding-right:12px;">제목 </label>
	<div class="form-group">
		<label class="sr-only" for="title">title</label>
		<input type="text" value="${calendarDto.title}" id="title" name="title" class="form-control" style="width:500px;">
	</div>
	
	<p style="margin-bottom:1px;"></p>
	
	<label for="startDay" style="padding-right:12px;">일시 </label>
	<div class="form-group">
		<label class="sr-only" for="startDay">startDay</label>
		<input type="text" value="" id="startDay" name="startDay" class="form-control" style="width:110px;">
		<select id="startTime" name="startTime" class="form-control" style="width:120px;"></select>
	</div>
	-
	<div class="form-group">
		<label class="sr-only" for="endDay">endDay</label>
		<input type="text" value="" id="endDay" name="endDay" class="form-control" style="width:110px;">
		<select id="endTime" name="endTime" class="form-control" style="width:120px;"></select>
	</div>
	
	<p style="margin-bottom:1px;"></p>
	
	<div class="form-group">
	<div class="checkbox" style="margin-left:50px;margin-right:10px;">
		<label>
		<input type="checkbox" id="allDay" name="allDay">종일
		</label>
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox" value="" id="loop" name="loop">반복
		</label>
	</div>
	</div>

	<p style="margin-bottom:10px;"></p>
	<hr>
	<label for="alarm" style="vertical-align:top;">내용</label>
	<div class="form-group">
		<textarea rows="10" cols="100" id="content" name="content" class="form-control">${calendarDto.content}</textarea>
	</div>
	
	<p style="margin-bottom:30px;"></p>
	
	<label for="address">장소 </label>
	<div class="form-group">
		<input type="hidden" id="latlng" name="latlng">
		<input type="text" id="place" name="place" style="width:400px;" placeholder="장소를 입력해주세요" class="form-control" value="${calendarDto.place}">
		<button type="button" class="btn btn-default" onclick="loadMap()"><span class="fa fa-search"></span> 지도추가</button>
		<span id="addMapState" style="margin-left:5px;"></span>
	</div>
	
	<p style="margin-bottom:10px;"></p>
	<button type="button" class="btn btn-link"><span class="fa fa-camera" style="color:#868686"> 이미지</span></button>
	<button type="button" class="btn btn-link"><span class="fa fa-book" style="color:#868686"> 문서</span></button>
	
	<p style="margin-bottom:50px;"></p>
	
	<center>
	<button type="submit" class="btn btn-primary" style="margin-right:5px;">
		<span class="fa fa-check"></span> 저장
	</button>
	<button type="button" class="btn btn-danger" onclick="location.href='/calendar.do'">
		<span class="fa fa-times"></span> 취소
	</button>

	</center>
	</form>
</div>
</center>
</body>
</html>